<script setup lang="ts">
import { ref } from "vue";

import useStore from "@src/store/store";

import {
  BellIcon,
  ChatBubbleOvalLeftIcon,
  Cog6ToothIcon,
  MoonIcon,
  PhoneIcon,
  SunIcon,
  UserIcon,
  PlusCircleIcon,
  ListBulletIcon,
  ServerStackIcon,
  ArrowLeftOnRectangleIcon
} from "@heroicons/vue/24/solid";
// import AccountDropdown from "@src/components/views/HomeView/Navigation/AccountDropdown.vue";
import Logo from "@src/components/views/HomeView/Navigation/Logo.vue";
import NavLink from "@src/components/views/HomeView/Navigation/NavLink.vue";
import router from "@src/router";
import useServiceStore from "@src/store/serviceStore";
import { servicesVersion } from "typescript/lib/tsserverlibrary";
import { ClockIcon } from "@heroicons/vue/24/outline";

const store = useStore();
const serviceStore = useServiceStore()
const showDropdown = ref(false);

// (event) change the active sidebar component when clicking on a NavLink
const handleActiveSidebarComponentChange = (value: string) => {
  store.activeSidebarComponent = value;
};

const logout = () => {
  const un = localStorage.removeItem("aivo_un");
  const pd = localStorage.removeItem("aivo_pd");
  console.log('close ws')
  serviceStore.logout();
  router.push('/login')
};
</script>

<template>
  <div
    class="xs:w-full md:w-11 md:h-full md:py-7 xs:py-5 px-5 flex xs:flex-row md:flex-col items-center transition-all duration-500"
  >
    <!--logo-->
    <Logo />

    <!--main navigation-->
    <div class="grow">
      <nav aria-label="Main navigation">
        <ul class="xs:flex md:block xs:justify-between xs:items-center">
          <!--message button-->
          <li>
            <NavLink
              :icon="ChatBubbleOvalLeftIcon"
              title="Conversations"
              @click="() => handleActiveSidebarComponentChange('messages')"
              :active="store.activeSidebarComponent === 'messages'"
            />
          </li>

          <!--history message button-->
          <li>
            <NavLink
              :icon="ClockIcon"
              title="Conversations"
              @click="() => handleActiveSidebarComponentChange('history')"
              :active="store.activeSidebarComponent === 'history'"
            />
          </li>
        </ul>
      </nav>
    </div>

    <!--secondary navigation-->
    <div>
      <nav aria-label="Extra navigation" class="xs:hidden md:block">
        <ul>
          <!--toggle dark mode button-->
          <li>
            <NavLink
              :icon="store.settings.darkMode ? SunIcon : MoonIcon"
              title="Night mode"
              @click="store.settings.darkMode = !store.settings.darkMode"
            />
          </li>
         
        </ul>
      </nav>

      <!--separator-->
      <hr
        class="xs:hidden md:block mb-6 border-gray-100 dark:border-gray-600"
      />
      <NavLink
              :icon="ArrowLeftOnRectangleIcon"
              title="Settings"
              @click="() => logout()"
              :active="store.activeSidebarComponent === 'settings'"
            />
     
    </div>
  </div>
</template>
